<script setup>
import {provide, ref, watch} from "vue";
import {onMounted} from "vue";
import {RoleAuth} from "../../../apis/auth";
import { Delete, Edit, Search, Share, Upload,Plus } from '@element-plus/icons-vue';
import {del} from "../../../apis/auth";
import PlusAuth from "../../manager/auth/PlusAuth.vue"
import {info} from "../../../apis/role";
import {ElMessageBox} from "element-plus";

const tableData=ref()

const deletRow = (scope)=>{

  ElMessageBox.confirm('删除数据口无法恢复，您确认删除吗？','确认删除',{type:"warning"}).then( res =>{
    del(scope.row.roleId,scope.row.authId).then(async result => {
      tableData.value = (await RoleAuth()).data;
    })
  }).catch(() => {

  })

  // del(scope.row.roleId,scope.row.authId).then(async result => {
  //   tableData.value = (await RoleAuth()).data;
  // })
}



const plusFormVisible = ref(false)
provide('dialogVisible',plusFormVisible)

const plusFormData=ref({})

const plusSuccess = ref(false)
provide('isSuccess',plusSuccess)


const plusRow = () =>{
  plusFormData.value={}
  plusFormVisible.value=true
  plusSuccess.value=false
}


onMounted( async () => {
  // info()
  tableData.value = (await RoleAuth()).data

})

watch(plusSuccess,async () => {
  tableData.value = (await RoleAuth()).data
})

</script>
<template>

  <el-button size="large" style="margin-bottom: 10px" type="primary" :icon="Plus" @click="plusRow">新增角色权限</el-button>

  <el-table
      border size="large"
      :data="tableData"
  >
    <el-table-column prop="roleId" label="角色ID" />
    <el-table-column prop="authId" label="权限ID"/>
    <el-table-column prop="roleName" label="角色"/>
    <el-table-column prop="authName" label="权限"/>

    <el-table-column align="center">
      <template #header #title>
        删除用户权限
      </template>
      <template #default="scope">
        <el-button type="primary" :icon="Delete" style="background-color:  #fab6b6; border: 0" @click="deletRow(scope)"/>
      </template>
    </el-table-column>



  </el-table>
  <PlusAuth :form-data="plusFormData"/>

</template>



<style scoped>
el-table{
  height: calc(100vh - 230px );
}
</style>